    *{margin: 0;
    padding: 0%;
    }
    .box{
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin: 100px auto;
        background-color: red;
        animation: happy 3s linear 1s infinite  ;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
    }
    @keyframes happy{
        0%{
            transform: rotate(0deeg);
        }
        20%{
            transform: rotate(360deg);
        }
        40%{
            background-color: yellow;
        }
        60%{
            text-align: center;
            line-height: 100px;
            font-size: 200px;
            width: 200px;
            height: 200px;
        }
        100%{
            transform: rotate(0deeg);
            width: 100px;
            height: 100px;
        }
    }